<template>
  <div class="filmList">
    <div class="list" v-for="item in films" :key="item.filmId" @click="goDetail(item.filmId)">
      <div class="left"><img :src="item.poster" /></div>
      <div class="center">
        <p>{{ item.name }}</p>
        <p>观众评分:{{ item.grade }}</p>
        <p>
          主演：<span v-for="(actor, index) in item.actors" :key="index"
            >{{ actor.name }}
          </span>
        </p>
        <p>{{ item.nation }} | {{ item.runtime }}分钟</p>
      </div>
      <div class="right">
        <van-button plain type="info" size="small" color="red">购票</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ["films"],
  mounted() {
    console.log(this.films);
  },
  methods: {
    // 去详情 - -携带参数id
    goDetail(id) {
      this.$router.push(`/detail/${id}`);
    },
  },
};
</script>
<style lang="less" scoped>
.filmList {
  .list {
    border-bottom: 1px solid #ccc;
    padding: 20px 10px;
    display: flex;
    position: relative;
    .left {
      height: 100px;
      img {
        height: 100%;
      }
    }
    .center {
      margin: 0 10px;
      p {
        font-size: 14px;
        color: gray;
        margin: 10px 0;
        max-width: 210px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p:first-child {
        font-size: 16px;
        color: black;
      }
    }
    .right {
      position: absolute;
      top: 40%;
      right: 10px;
    }
  }
}
</style>
